

<!--数据统计-->

<template>
    <div class="data-statistics-box">
        <div class="list_box">
            <div class="item_detail"
                 v-for="(item,index) in dataConList"
                 :key="item.id">
                <p>{{item.title}}</p>
                <span>{{item.num}}</span>
            </div>
        </div>
        <div class="data_Analy">
            <el-tabs v-model="activeName"
                     type="card"
                     @tab-click="handleClick">
                <el-tab-pane label="用户分析"
                             name="first">
                    <div class="first_tabcon">
                        <el-button type="primary" @click="downloadData()">下载用户数据</el-button>
                        <div class="angel_chart"
                             style='margin-top:20px; display: flex;'>
                            <!--新老粉丝-->
                            <div id='fans_chart'
                                 :style="{width: '450px', height: '400px',}"></div>
                            <!--男女粉丝-->
                            <div id='fans_sex'
                                 :style="{width: '450px', height: '400px',}"></div>
                        </div>
                        <div class="region"
                             style='margin-top:20px'>
                            <!--新增粉丝地区分布-->
                            <div id='fans_region'
                                 :style="{width: '100%', height: '300px',}"></div>
                        </div>
                        <div class="signTime"
                             style='margin-top:20px'>
                            <!--粉丝签到时间-->
                            <div id='fans_signTime'
                                 :style="{width: '100%', height: '300px',}"></div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="信息分析"
                             name="second">
                    <div class="angel_chart"
                         style='margin-top:20px; display: flex;'>
                        <!--发消息人数分布-->
                        <div id='fans_message_person'
                             :style="{width: '450px', height: '400px',}"></div>
                        <!--发布消息次数分布-->
                        <div id='fans_message_number'
                             :style="{width: '400px', height: '400px',}"></div>
                    </div>
                    <div class="region"
                         style='margin-top:20px'>
                        <!--消息发布人数趋势图-->
                        <div id='fans_message_data'
                             :style="{width: '900px', height: '400px',}"></div>
                    </div>


                </el-tab-pane>

            </el-tabs>
        </div>

    </div>
</template>

<script>
import echarts from 'echarts'
export default {
    name: 'dataStatistics',
    data () {
        return {
            activeName: 'first',
            chartLeftList:[],
            chartRightList:[],
            dataConList: [
                {
                    title: '参会人数',
                    name:'CH_HR_COUNT',
                    num: 8000,
                    id: 1
                },
                {
                    title: '新增粉丝',
                    name:'NEW_FENS',
                    num: 1000,
                    id: 2
                },
                {
                    title: '参与互动人数',
                    name:'HD_HR_COUNT',
                    num: 7000,
                    id: 3
                },
                {
                    title: '互动信息条数',
                    name:'MSG_COUNT',
                    num: 5000,
                    id: 4
                }
            ],
        }
    },
    created () {


    },
    mounted () {
        this.initLeftChart();
        this.initRightChart()
        // 初始化
        // this.myecharts = echarts.init(document.getElementById('main'))
        // this.myecharts.setOption(this.option)
        // const that = this
        // window.addEventListener('resize', function () {
        //     that.myecharts.resize()
        // })


    },
    destroyed(){
        this.chartLeftList.concat(this.chartRightList).forEach(function (item, index) {
            item.clear();// 图表清空
            item.dispose(); // 图表释放
        })
    },
    methods: {
        handleClick (tab, event) {
            if(this.chartRightList.length === 0){
                this.initRightChart()
            }
        },
        drawLeftChart (data) {
            this.chartLeftList.forEach( (myChart, index) =>{
                if (myChart._dom.id === 'fans_region1') {
                    var colors = ['#5793f3', '#d14a61', '#675bba'];
                    myChart.setOption({
                        color: colors,

                        tooltip: {
                            trigger: 'none',
                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        legend: {
                            data: ['2015 降水量', '2016 降水量']
                        },
                        grid: {
                            top: 70,
                            bottom: 50
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLine: {
                                    onZero: false,
                                    lineStyle: {
                                        color: colors[1]
                                    }
                                },
                                axisPointer: {
                                    label: {
                                        formatter: function (params) {
                                            return '降水量  ' + params.value
                                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                        }
                                    }
                                },
                                data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
                            },
                            {
                                type: 'category',
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLine: {
                                    onZero: false,
                                    lineStyle: {
                                        color: colors[0]
                                    }
                                },
                                axisPointer: {
                                    label: {
                                        formatter: function (params) {
                                            return '降水量  ' + params.value
                                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                        }
                                    }
                                },
                                data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '2015 降水量',
                                type: 'line',
                                xAxisIndex: 1,
                                smooth: true,
                                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                            },
                            {
                                name: '2016 降水量',
                                type: 'line',
                                smooth: true,
                                data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
                            }
                        ]
                    })
                } else if (myChart._dom.id === 'fans_signTime') {
                    //线状图
                    //粉丝签到时间分布
                    if (!data.fansQd) {
                        return
                    }
                    let fansQd = data.fansQd;
                    // let fansQdList = fansQd.map(item =>{
                    //     return [item.QDTIME.split(' ')[0], item.NUM]
                    // });
                    var xDataf = [], yDataf = [];
                        fansQd.forEach(item =>{
                            xDataf.push(item.QDTIME);
                            yDataf.push(item.NUM);
                        });
                        //fansQdList[3][1] = 3;
                    // yData[3]=3
                    myChart.setOption({
                        title: { text: '粉丝签到时间分布' },
                        tooltip: {},
                        color: [
                            '#7b68ee',  '#6b8e23'
                        ],
                        toolbox: {
                            feature: {
                                dataView: {},
                                saveAsImage: {
                                    pixelRatio: 2
                                },
                                restore: {}
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : xDataf ||['周一','周二','周三','周四','周五','周六','周日']
                            }
                        ],
                        yAxis: {},
                        series: [{
                            type: 'line',
                            smooth: true,
                            data: yDataf || [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]
                        }]
                    });

                } else if(myChart._dom.id === 'fans_region'){
                    //柱状图
                    //粉丝地区分布
                    if (!data.fansCity) {
                        return
                    }
                    let fansCity = data.fansCity;
                    var xData = [],yData = [];
                        fansCity.forEach(item => {
                            xData.push(item.CITY);
                            yData.push(item.NUM)
                        })
                    // xData.push('beijing','shanghai','guangzhou')
                    // yData.push('44','24','17')
                    myChart.setOption({
                        title : {
                            text: '新增粉丝地区分布',
                            subtext: ''
                        },
                        color: [
                            '#32cd32', '#6495ed'
                        ],
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:[]
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : xData
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'粉丝量',
                                type:'bar',
                                data: yData,
                                markPoint : {
                                    data : [
                                    ]
                                },
                                markLine : {
                                    data : [

                                    ]
                                }
                            }
                        ]
                    });
                } else if(myChart._dom.id === 'fans_chart'){
                    // 绘制饼图
                    //新老粉丝
                    if (!data.fansProportion) {
                        return
                    }
                    let newFans = data.fansProportion.NEW_FENS,
                        oldFans = data.fansProportion.OLD_FENS;
                    myChart.setOption({
                        title: {
                            text: '用户分析',
                            subtext: '活动粉丝',
                            left: 'center'
                        },
                        color: [
                           '#7b68ee',  '#6b8e23'
                        ],
                        tooltip: {},
                        itemStyle: {
                            // 阴影的大小
                            shadowBlur: 2,
                            // 阴影水平方向上的偏移
                            shadowOffsetX: 0,
                            // 阴影垂直方向上的偏移
                            shadowOffsetY: 0,
                            // 阴影颜色
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        legend: {
                            data: ['老粉丝', '新增粉丝'],
                            orient: 'vertical',
                            x: 'left',
                        },
                        series: {
                            type: 'pie',
                            data: [
                                { name: '新增粉丝', value: newFans },
                                { name: '老粉丝', value: oldFans }
                            ]
                        }
                    });
                } else if(myChart._dom.id === 'fans_sex'){
                    // 绘制饼图
                    //男女比例
                    if (!data.fansSex) {
                        return
                    }
                    let fansSex = data.fansSex,
                        girl = fansSex.find(item => item.SEX === '女'),
                        boy = fansSex.find(item => item.SEX === '男');
                    myChart.setOption({
                        title: {
                            text: '活动粉丝性别分析',
                            subtext: '',
                            left: 'center'
                        },
                        color: [
                            '#7b68ee',  '#6b8e23'
                        ],
                        tooltip: {},
                        itemStyle: {
                            // 阴影的大小
                            shadowBlur: 2,
                            // 阴影水平方向上的偏移
                            shadowOffsetX: 0,
                            // 阴影垂直方向上的偏移
                            shadowOffsetY: 0,
                            // 阴影颜色
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        legend: {
                            data: ['男', '女'],
                            orient: 'vertical',
                            x: 'left',
                        },
                        series: {
                            type: 'pie',
                            data: [
                                { name: '女', value: girl?girl.NUM :0},
                                { name: '男', value: boy?boy.NUM :0 }

                            ]
                        }
                    });
                }
            });

            // 基于准备好的dom，初始化echarts实例

            // window.addEventListener('resize', function () {
            //     this.myChart.resize()
            // })
        },
        drawRightChart (data) {
            this.chartRightList.forEach( (myChart, index) =>{
                if (myChart._dom.id === 'fans_region1') {
                    var colors = ['#5793f3', '#d14a61', '#675bba'];
                    myChart.setOption({
                        color: colors,

                        tooltip: {
                            trigger: 'none',
                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        legend: {
                            data: ['2015 降水量', '2016 降水量']
                        },
                        grid: {
                            top: 70,
                            bottom: 50
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLine: {
                                    onZero: false,
                                    lineStyle: {
                                        color: colors[1]
                                    }
                                },
                                axisPointer: {
                                    label: {
                                        formatter: function (params) {
                                            return '降水量  ' + params.value
                                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                        }
                                    }
                                },
                                data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
                            },
                            {
                                type: 'category',
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLine: {
                                    onZero: false,
                                    lineStyle: {
                                        color: colors[0]
                                    }
                                },
                                axisPointer: {
                                    label: {
                                        formatter: function (params) {
                                            return '降水量  ' + params.value
                                                + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                                        }
                                    }
                                },
                                data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '2015 降水量',
                                type: 'line',
                                xAxisIndex: 1,
                                smooth: true,
                                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                            },
                            {
                                name: '2016 降水量',
                                type: 'line',
                                smooth: true,
                                data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
                            }
                        ]
                    })


                } else if(myChart._dom.id === 'fans_message_data') {
                    //住状图
                    //消息发送人数趋势图
                    if (!data || !data.msgUserNum) {
                        return
                    }

                    let msgUserNum = data.msgUserNum;
                    // let fansQdList = fansQd.map(item =>{
                    //     return [item.QDTIME.split(' ')[0], item.NUM]
                    // });
                    var xDataz = [], yDataz = [];
                    msgUserNum.forEach(item =>{
                        xDataz.push(item.CREATETIME);
                        yDataz.push(item.UNUM);
                    });
                    //fansQdList[3][1] = 3;
                    // yData[3]=3
                    // xData[3]=3
                    // xData[3]=3
                    // yData[3]=3
                    myChart.setOption({
                        title: { text: '消息发送趋势图' },
                        tooltip: {},
                        color: [
                            '#7b68ee',  '#6b8e23'

                        ],
                        toolbox: {
                            feature: {
                                dataView: {},
                                saveAsImage: {
                                    pixelRatio: 2
                                },
                                restore: {}
                            }
                        },
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : xDataz ||['周一','周二','周三','周四','周五','周六','周日']
                            }
                        ],
                        yAxis: {},
                        series: [{
                            type: 'line',
                            smooth: true,
                            data: yDataz || [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]
                        }]
                    });

                } else if(myChart._dom.id === 'fans_message_person'){
                    // 绘制饼图
                    //发送和未发送比例
                    if (!data.msgNum) {
                        return
                    }
                    let msgNum = data.msgNum,
                        CH_HR_COUNT = msgNum.CH_HR_COUNT, //参会人数
                        HD_HR_COUNT = msgNum.HD_HR_COUNT ;//活动人数
                    myChart.setOption({
                        title: {
                            text: '发送和未发送比例',
                            subtext: '',
                            left: 'center'
                        },
                        color: [
                            '#7b68ee',  '#6b8e23'
                        ],
                        tooltip: {},
                        itemStyle: {
                            // 阴影的大小
                            shadowBlur: 2,
                            // 阴影水平方向上的偏移
                            shadowOffsetX: 0,
                            // 阴影垂直方向上的偏移
                            shadowOffsetY: 0,
                            // 阴影颜色
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        legend: {
                            data: ['发送', '未发送'],
                            orient: 'vertical',
                            x: 'left',
                        },
                        series: {
                            type: 'pie',
                            data: [
                                { name: '发送', value: HD_HR_COUNT},
                                { name: '未发送', value: CH_HR_COUNT - HD_HR_COUNT }

                            ]
                        }
                    });
                } else if(myChart._dom.id === 'fans_message_number'){
                    //柱状图
                    //发布消息次数分布
                    if (!data.msgDistribution) {
                        return
                    }

                    let msgDistribution = data.msgDistribution;
                    var xData = [],yData = [];
                    msgDistribution.forEach(item => {
                        xData.push(item.UN_TYPE);
                        yData.push(item.UN_NUM);
                    })

                    myChart.setOption({
                        title : {
                            text: '发布消息次数分布',
                            subtext: ''
                        },
                        color: [
                            '#7b68ee',  '#6b8e23'
                        ],
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:[]
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : xData
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'消息数量',
                                type:'bar',
                                data: yData,
                                markPoint : {
                                    data : [
                                    ]
                                },
                                markLine : {
                                    data : [

                                    ]
                                }
                            }
                        ]
                    });
                }
            });

            // 基于准备好的dom，初始化echarts实例

            // window.addEventListener('resize', function () {
            //     this.myChart.resize()
            // })
        },
        userDataAnalysis(param){
            //用户分析：
            //新老粉丝比例,男女分布，人员地区分布   /dataft/analysis/userDataAnalysis   post 参数:id(用户id)，sceneid
            //返回结果中：map对象下面fansProportion新老粉丝，fansSex男女分布，fansCity人员地区分布    粉丝签到时间结果待定
            //id(用户id)，sceneid
            return new Promise((resolve,reject)=>{
                this.$api.post('/analysis/userDataAnalysis',
                    {sceneid:param.sceneid,id:param.id},
                    success => {
                        if(success){
                            resolve(success);
                        }
                    }, fal => {
                        this.$message.error(fal);
                        //reject(fal);
                        resolve();
                    },0);// /dataft/
            });
        },
        getSceneMessagerProperties(param){
            return new Promise((resolve,reject)=>{
                this.$api.post('/analysis/getSceneMessagerProperties',
                    {sceneid:param.sceneid,id:param.id},success => {
                        if(success){
                            resolve(success);
                        }
                    }, fal => {
                        this.$message.error(fal);
                        //reject(fal);
                        resolve();
                    },0);// /dataft/
            });
        },
        downloadData(){},
        initLeftChart(){
            ['fans_chart', 'fans_sex', 'fans_region', 'fans_signTime'].forEach((dom, index) => {
                let myChart = echarts.init(document.getElementById(dom));
                myChart.showLoading({
                    text: '正在努力的读取数据中...',    //loading话术
                });
                this.chartLeftList.push(myChart);
            });

            let sceneId = this.$route.query.sceneId ||8895157;
            this.userDataAnalysis({sceneid:8895221||sceneId,id:''}).then(resp => {
                this.drawLeftChart(resp);
                this.dataConList.forEach(item=>{
                    if(item.name === 'NEW_FENS' ){
                        item.num = resp.fansProportion.NEW_FENS
                    }
                });
                this.chartLeftList.forEach(function(myChart) {
                    myChart.hideLoading();
                })
            },err =>{
                this.chartLeftList.forEach(function(myChart) {
                    myChart.hideLoading();
                });
                throw new Error(err);
            });
        },
        initRightChart(){
            ['fans_message_person','fans_message_number','fans_message_data'].forEach((dom, index) => {
                let myChart = echarts.init(document.getElementById(dom));
                myChart.showLoading({
                    text: '正在努力的读取数据中...',    //loading
                });
                this.chartRightList.push(myChart);
            });
            let sceneId = this.$route.query.sceneId ||8839806||8895157;
            this.getSceneMessagerProperties({sceneid: 8895221||sceneId,id:''}).then(resp => {
                this.drawRightChart(resp);
                this.dataConList.forEach(item=>{
                    if(item.name === 'CH_HR_COUNT' ){
                        //参会人数
                        item.num = resp.msgNum.CH_HR_COUNT
                    }
                    if(item.name === 'HD_HR_COUNT' ){
                        //参与互动人数
                        item.num = resp.msgNum.HD_HR_COUNT
                    }
                    if(item.name === 'MSG_COUNT' ){
                        //互动信息条数
                        item.num = resp.msgNum.MSG_COUNT
                    }
                });
                this.chartRightList.forEach(function(myChart) {
                    myChart.hideLoading();
                })
            },err =>{
                this.chartRightList.forEach(function(myChart) {
                    myChart.hideLoading();
                });
                throw new Error(err);
            });

        }

    },

};
</script>

<style scoped lang="scss">
.data-statistics-box {

    width: 100%;
    background-color: #fff;
    margin: 20px !important;
    border-radius: 20px;
    padding: 10px 20px;
    overflow: auto;
    height: 100%;
    .list_box {
        overflow: hidden;
        .item_detail {
            width: 20%;
            float: left;
            margin-right: 5%;
            height: 50px;
            border: solid 1px #000;
            text-align: center;
            p {
                font-size: 16px;
            }
            span {
                font-size: 14px;
            }
        }
    }
    .data_Analy {
        margin-top: 20px;
        .first_tabcon {
            .angel_chart {
                overflow: hidden;
                /*#fans_sex {*/
                /*    float: right;*/
                /*}*/
                /*#fans_chart {*/
                /*    float: left;*/
                /*}*/
            }
        }
    }
}
</style>